<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-switch"
		:class="_classes"
		:style="_styles"
		:hover-class="hoverClass"
		@tap="_handleClick"
	>
		<view
			class="pure-switch__text pure-switch__text--off pure-switch__text--show"
			v-if="mode === 'outer'"
			>{{ _offText }}</view
		>
		<view class="pure-switch__main">
			<view class="pure-switch__circle">
				<view
					class="pure-switch__texts"
					v-if="mode === 'circle'"
				>
					<view
						class="pure-switch__text pure-switch__text--loading"
						:class="{ 'pure-switch__text--show': loading }"
					>
						<pure-icon :name="loadingIconName"></pure-icon>
					</view>
					<view
						class="pure-switch__text pure-switch__text--on"
						:class="{ 'pure-switch__text--show': modelValue && !loading }"
					>
						{{ _onText }}
					</view>
					<view
						class="pure-switch__text pure-switch__text--off"
						:class="{ 'pure-switch__text--show': !modelValue && !loading }"
					>
						{{ _offText }}
					</view>
				</view>
				<view
					class="pure-switch__icons"
					v-else-if="mode === 'icon'"
				>
					<view
						class="pure-switch__icon pure-switch__icon--off"
						:class="{ 'pure-switch__icon--show': !modelValue && !loading }"
					>
						<pure-icon :name="_offText"></pure-icon>
					</view>
					<view
						class="pure-switch__icon pure-switch__icon--loading"
						:class="{ 'pure-switch__icon--show': loading }"
					>
						<pure-icon :name="loadingIconName"></pure-icon>
					</view>
					<view
						class="pure-switch__icon pure-switch__icon--on"
						:class="{ 'pure-switch__icon--show': modelValue && !loading }"
					>
						<pure-icon :name="_onText"></pure-icon>
					</view>
				</view>
			</view>
			<view class="pure-switch__content">
				<slot>
					<view
						class="pure-switch__texts"
						v-if="mode === 'inner'"
					>
						<view
							class="pure-switch__text pure-switch__text--on"
							:class="{ 'pure-switch__text--show': modelValue }"
						>
							{{ _onText }}
						</view>
						<view
							class="pure-switch__text pure-switch__text--off"
							:class="{ 'pure-switch__text--show': !modelValue }"
						>
							{{ _offText }}
						</view>
					</view>
				</slot>
			</view>
		</view>
		<view
			class="pure-switch__text pure-switch__text--on pure-switch__text--show"
			v-if="mode === 'outer'"
			>{{ _onText }}</view
		>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { computed, inject, watch } from "vue";
	import props from "./props";
	import { getThemeValue } from "../../utils";

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Injects
	// 表单项 change 事件
	const PureFormItemOnChange = inject("PureFormItemOnChange", null);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["update:modelValue", "onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`pure-switch--theme pure-switch--theme-${_props.theme}`);

		// 状态
		if (_props.modelValue) array.push("pure-switch--checked");

		// 禁用
		if (_props.disabled) array.push("pure-switch--disabled");

		// 只读
		if (_props.readonly) array.push("pure-switch--readonly");

		// 幽灵样式
		if (_props.ghost) array.push("pure-switch--ghost");

		// 文本模式
		if (_props.mode) array.push(`pure-switch--text-mode pure-switch--text-mode--${_props.mode}`);

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 主题
		if (_props.theme) array.push(`--pure-switch-theme: ${getThemeValue(_props.theme)}`);

		// 宽
		if (_props.width) array.push(`--pure-switch-width: ${_props.width}`);

		// 高
		if (_props.height) array.push(`--pure-switch-height: ${_props.height}`);

		// 圆点距离边框的距离
		if (_props.gap) array.push(`--pure-switch-circle-gap: ${_props.gap}`);

		return array;
	});

	// 切换后触发表单项 change 事件
	watch(
		() => _props.modelValue,
		(val) => {
			PureFormItemOnChange?.();
		}
	);

	// 关闭文本或图标
	const _offText = computed(() => {
		if (_props?.offText !== undefined) return _props.offText;
		if (_props?.mode === "icon") return "__close";
		return "关";
	});

	// 开启文本或图标
	const _onText = computed(() => {
		if (_props?.onText !== undefined) return _props.onText;
		if (_props?.mode === "icon") return "__checked";
		return "开";
	});

	// 点击事件
	function _handleClick() {
		_emits("onClick", _props.modelValue);

		// 异步
		if (_props.async) {
			return;
		}

		_emits("update:modelValue", !_props.modelValue);
	}
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
